import React from 'react';
import { Typography, Table, Tag, Button, Space } from 'antd';
import { EyeOutlined, CloseOutlined } from '@ant-design/icons';

const { Title } = Typography;

const AppointmentHistory: React.FC = () => {
  // 假数据
  const mockData = [
    {
      key: '1',
      id: 'APT001',
      vaccine: '新冠疫苗',
      date: '2024-01-15',
      time: '09:00',
      status: 'confirmed',
      createTime: '2024-01-10 14:30',
    },
    {
      key: '2',
      id: 'APT002',
      vaccine: '流感疫苗',
      date: '2024-01-20',
      time: '14:00',
      status: 'pending',
      createTime: '2024-01-12 10:15',
    },
    {
      key: '3',
      id: 'APT003',
      vaccine: '乙肝疫苗',
      date: '2024-01-08',
      time: '11:00',
      status: 'completed',
      createTime: '2024-01-05 16:45',
    },
  ];

  const getStatusTag = (status: string) => {
    const statusMap = {
      pending: { color: 'orange', text: '待确认' },
      confirmed: { color: 'blue', text: '已确认' },
      completed: { color: 'green', text: '已完成' },
      cancelled: { color: 'red', text: '已取消' },
    };
    const config = statusMap[status as keyof typeof statusMap] || { color: 'default', text: status };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  const columns = [
    {
      title: '预约编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '疫苗名称',
      dataIndex: 'vaccine',
      key: 'vaccine',
    },
    {
      title: '预约日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '预约时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: getStatusTag,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (record: any) => (
        <Space size="middle">
          <Button type="link" icon={<EyeOutlined />} size="small">
            查看
          </Button>
          {record.status === 'pending' && (
            <Button type="link" danger icon={<CloseOutlined />} size="small">
              取消
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ background: '#fff', padding: '24px', borderRadius: '8px' }}>
        <Title level={2} style={{ marginBottom: 24 }}>我的预约记录</Title>
        
        <Table 
          columns={columns} 
          dataSource={mockData}
          pagination={{ pageSize: 10 }}
          rowKey="key"
        />
      </div>
    </div>
  );
};

export default AppointmentHistory;
